<template>
    <i class="dl-icon" :class="[type && `dl-icon--${type}`]" :style="customStyle">
        <font-awesome-icon  v-bind="filteredProps" />
    </i>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IconProps } from './types'
// 导入组件
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { omit } from 'lodash-es'

defineOptions({
    name: 'DlIcon',
    inheritAttrs: false
})

// 定义props
const props = defineProps<IconProps>()
//$props中包含了我们自定义的类型，fontawesome没有提供，我们需要过滤出去
const filteredProps = computed(()=>{
    return omit(props, ['type', 'color'])
})

// 自定义样式color
const customStyle = computed(()=>{
    return  props.color ? {
        color:props.color
    } : {}
})

</script>